<template>
  <div>
    <t-card>
      <t-form :data="serchFormData" layout="inline">
        <t-form-item label="渠道名称" name="companyName">
          <t-input v-model="serchFormData.companyName" placeholder="请输入渠道名称" type="search" />
        </t-form-item>
        <t-form-item label="渠道ID" name="companyId">
          <t-input v-model="serchFormData.companyId" placeholder="请输入渠道编号" type="search" />
        </t-form-item>
        <t-button :loading="dataLoading" @click="handleSearchClick">
          查询
        </t-button>
      </t-form>
      <t-divider />
      <div class="add-batch">
        <t-button @click="handleAddBatchClick">
          添加批次
        </t-button>
      </div>
      <!-- @vue-expect-error -->
      <t-table row-key="id" :data="data" :columns="columns" :pagination="pagination" cell-empty-content="-" :loading="dataLoading" size="small" @page-change="handlePageChange">
        <template #op="{ row }">
          <t-button @click="handleBatchUseDetailClick(row)">
            使用明细
          </t-button>
        </template>
      </t-table>
    </t-card>
    <batch-form-dialog v-model:visible="batchFormDialogVisible" @success="handleSuccess" />
  </div>
</template>
<script setup lang="ts">
import type { PageInfo, PaginationProps, TableProps } from 'tdesign-vue-next'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

import { getBatchPageList } from '@/api/batch'
import type { BatchRes } from '@/api/model/batch'
import { batchTypeDict } from '@/utils/dict/batch'

import BatchFormDialog from './component/BatchFormDialog.vue'

const serchFormData = reactive({
  companyName: '',
  companyId: '',
})
const batchFormDialogVisible = ref(false)
function handleAddBatchClick() {
  batchFormDialogVisible.value = true
}
type BatchTableData = BatchRes
const data = ref<BatchTableData[]>([])
const columns: TableProps<BatchTableData>['columns'] = [
  {
    colKey: 'id',
    title: 'ID',
  },
  {
    colKey: 'batchType',
    title: '批次类型',
    cell: (_, { row }) => {
      return batchTypeDict[row.batchType]
    },
  },
  { colKey: 'companyName', title: '渠道名称' },
  { colKey: 'ticketName', title: '票类' },
  { colKey: 'ticketPrice', title: '票价' },
  { colKey: 'allAmount', title: '总金额' },
  { colKey: 'ticketCount', title: '购买数量' },
  { colKey: 'ticketCountGift', title: '赠送数量' },
  { colKey: 'remainingCount', title: '剩余数量' },

  // { colKey: 'orderDate', title: '购买时间' },
  // { colKey: 'createDate', title: '创建时间' },
  // { colKey: 'updateDate', title: '更新时间' },
  {
    colKey: 'op',
    title: '操作',
  },
]
const pagination = ref<PaginationProps>({
  current: 1,
  pageSize: 15,
  total: 0,

})
const dataLoading = ref(false)
function fetchData() {
  dataLoading.value = true
  getBatchPageList(pagination.value.current, pagination.value.pageSize).then((res) => {
    data.value = res.data
    pagination.value = {
      current: res.current,
      pageSize: pagination.value.pageSize,
      total: res.total,
    }
  }).finally(() => {
    dataLoading.value = false
  })
}
fetchData()
function handleSearchClick() {
  pagination.value = {
    current: 1,
    pageSize: 15,
    total: 0,
  }
  fetchData()
}

function handleSuccess() {
  pagination.value = {
    current: 1,
    pageSize: 15,
    total: 0,
  }
  fetchData()
}

function handlePageChange(pageInfo: PageInfo) {
  pagination.value = {
    current: pageInfo.current,
    pageSize: pageInfo.pageSize,
  }
  fetchData()
}

const router = useRouter()
function handleBatchUseDetailClick(row: BatchTableData) {
  router.push({
    name: 'BatchUse',
    query: {
      batchOrderId: row.id,
    },
  })
}
</script>
<style scoped>

</style>
